<template>
    <div class="" id="RequireImplement">
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="primary">需求实现</el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
        </el-row>


            <datepickersummary @filterChange="getData"></datepickersummary>


        <div v-show="!filters.radio">
            <div class="tab-box" v-loading="tagLoading" element-loading-text="加载中...">
                <el-tabs key="1" v-model="projTagActiveName">
                    <el-tab-pane label="需求" name="0">
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.requirement_total" :label_data="getFix(deptlable.requirement_total)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.requirement" :label_data="getFix(deptlable.requirement_based)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'需求变更率'"
                                    :num="getPrecent(deptlable.req_change_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'需求基线率'"
                                    :num="getPrecent(deptlable.req_baseline_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>                            
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'设计引入有效bug率'"
                                    :num="getPrecent(deptlable.design_bug_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'OR需求覆盖度'"
                                    :num="getPrecent(deptlable.req_or_case_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'SRS需求覆盖度'"
                                    :num="getPrecent(deptlable.req_srs_case_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'AR需求覆盖度'"
                                    :num="getPrecent(deptlable.req_ar_case_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'需求设计基线率'"
                                    :num="getPrecent(deptlable.req_design_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'需求引入有效bug率'"
                                    :num="getPrecent(deptlable.req_bug_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>
                        </el-row>
                    </el-tab-pane>

                    <el-tab-pane label="任务" name="1">
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.task_total" :label_data="getFix(deptlable.task_total)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.task_overdue" :label_data="getFix(deptlable.task_overdue)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.task_overdue_rate" :label_data="getPrecent(deptlable.task_overdue_rate)"></LabelGrid>
                            </el-col>
                        </el-row>
                    </el-tab-pane>

                    <el-tab-pane label="Patch提交" name="2">
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.number_count" :label_data="getFix(patchData.number__count)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.avg_daily_patch_count" :label_data="getFix(patchData.avg_daily_patch_count)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.avg_daily_effective_code" :label_data="getFix(patchData.avg_daily_effective_code)"></LabelGrid>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>           
            </div>
            <div class="rank">
                <el-row :gutter="30">
                    <el-col :xs="24" :sm="24" :lg="12">
                        <el-card class="box-card m-b" shadow="never">
                            <div slot="header" class="clearfix" style="vertical-align:middle">
                                <div style="float: left; padding: 10px 0">代码提交总数</div>                       
                            </div>
                            <el-table :data="sortpatchList"
                                style="width: 100%">
                                <el-table-column width="100" align="center" label="排名">                 
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index=== 0 && current === 1" type="danger" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 1 && current === 1" type="warning" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 2 && current === 1" type="primary" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else> {{scope.$index + 1 + size*(current - 1)}} </span>
                                    </template>                                                               
                                    </el-table-column> 
                                    <el-table-column
                                    prop="owner"
                                    align="center"
                                    label="个人">
                                    </el-table-column>                              
                                    <el-table-column
                                    prop="count_patch"
                                    align="center"
                                    label="代码提交总数">
                                    </el-table-column>
                            </el-table>
                            <el-pagination class="marT"
                                :page-size="size"
                                background                              
                                @size-change="handleSizeChange3"
                                @current-change="handleCurrentImportDeptChange3"
                                :current-page="current"                               
                                layout="prev, pager, next"
                                style="text-align: center"
                                :total="total">
                            </el-pagination>
                        </el-card>
                    </el-col>

                    <el-col :xs="24" :sm="24" :lg="12">
                        <el-card class="box-card m-b" shadow="never">
                            <div slot="header" class="clearfix" style="vertical-align:middle">
                                <div style="float: left; padding: 10px 0"></div>
                                <el-radio-group v-model="importedSelected" style="float: right; padding: 3px 0" size="mini">
                                    <el-radio-button label="平均日代码提交数"></el-radio-button>
                                    <el-radio-button label="平均日有效代码提交"></el-radio-button>
                                </el-radio-group>
                            </div>
                            <div v-if="importedSelected === '平均日代码提交数'">
                                <el-table
                                :data="sortpatchRank"
                                style="width: 100%"
                                >
                                    <el-table-column width="100" align="center" label="排名">                 
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index=== 0 && effectCodeCurrent === 1" type="danger" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 1 && effectCodeCurrent === 1" type="warning" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 2 && effectCodeCurrent === 1" type="primary" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else> {{scope.$index + 1 + effectCodeSize*(effectCodeCurrent - 1)}} </span>
                                    </template>                                                               
                                    </el-table-column>                               
                                    <el-table-column
                                    prop="owner"
                                    align="center"
                                    label="个人">
                                    </el-table-column>
                                    <el-table-column
                                    prop="avg_daily_patch_count"
                                    label="平均日patch提交数(件/人)"
                                    align="center"
                                    >
                                    </el-table-column>                                                                
                                    <!-- <el-table-column
                                    prop="avg_daily_effective_code"
                                    label="平均日有效代码(行/人)"
                                    align="center"
                                    >
                                    </el-table-column>                               -->
                                </el-table>
                                <el-pagination class="marT"
                                    :page-size="effectCodeSize"
                                    background                              
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentImportDeptChange"
                                    :current-page="effectCodeCurrent"                               
                                    layout="prev, pager, next"
                                    style="text-align: center"
                                    :total="effectCodeTotal">
                                </el-pagination>
                            </div>
                            <div v-else>
                                <el-table                               
                                :data="sorteffectCodeRank"
                                style="width: 100%"
                                >
                                    <el-table-column width="100" align="center" label="排名">                 
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index=== 0 && effectCodeCurrent2 === 1" type="danger" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 1 && effectCodeCurrent2 === 1" type="warning" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 2 && effectCodeCurrent2 === 1" type="primary" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else> {{scope.$index + 1 + effectCodeSize*(effectCodeCurrent2 - 1)}} </span>
                                    </template>                                                               
                                    </el-table-column>                               
                                    <el-table-column
                                    prop="owner"
                                    align="center"
                                    label="个人">
                                    </el-table-column>
                                    <!-- <el-table-column
                                    prop="avg_daily_patch_count"
                                    label="平均日patch提交数(件/人)"
                                    align="center"
                                    >
                                    </el-table-column>                                                                 -->
                                    <el-table-column
                                    prop="avg_daily_effective_code"
                                    label="平均日有效代码(行/人)"
                                    align="center"
                                    >
                                    </el-table-column>                              
                                </el-table>
                                <el-pagination class="marT"
                                    :page-size="effectCodeSize2"
                                    background                              
                                    @size-change="handleSizeChange2"
                                    @current-change="handleCurrentImportDeptChange2"
                                    :current-page="effectCodeCurrent2"                               
                                    layout="prev, pager, next"
                                    style="text-align: center"
                                    :total="effectCodeTotal2">
                                </el-pagination>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div> 

            <div class="line-box marT">
               <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                    <el-tab-pane name="0" label="代码提交趋势">
                        <ve-line 
                        :data="lineData"
                        :settings="lineChartSettings" 
                        ref="vline0"
                        :data-empty="dataEmpty"></ve-line>
                    </el-tab-pane>
                    <el-tab-pane label="日代码提交数" name="1">
                        <ve-line 
                        :data="lineData2"
                        :settings="lineChartSettings" 
                        ref="vline1"
                        :data-empty="dataEmpty"></ve-line>
                    </el-tab-pane>
                    <el-tab-pane label="日有效代码提交" name="2">
                        <ve-line 
                        :data="lineData3"
                        :settings="lineChartSettings" 
                        ref="vline2"
                        :data-empty="dataEmpty"></ve-line>
                    </el-tab-pane>                   
                </el-tabs>
           </div>

           <div class="table-box marT bgColor">
               <div class="ibox-title pad">日数据列表</div>
               <el-row style="padding: 20px">
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-table
                            :data="tableData"
                            :header-cell-style="{background:'#eef1f6'}"
                            style="width: 100%">
                            <el-table-column
                                align="center"
                                type="index"                               
                                label="编号"
                                width="60">
                                <template slot-scope="scope">
                                    <span>{{ scope.$index + 1 + tableSize*(tableCurrent - 1) }}</span> 
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="date"
                                label="日期"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="requirement_total"
                                label="需求总数"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="requirement_based"
                                label="已基线数"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="task_total"
                                label="任务总件数"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="task_overdue"
                                label="任务延期件数"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="task_overdue_rate"
                                label="任务延期率"
                                >
                                <template slot-scope="scope">
                                    <span>{{ getPrecent(scope.row.task_overdue_rate) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination class="marT"
                            :page-size="tableSize"
                            background                              
                            @size-change="tableSizeChange"
                            @current-change="tableCurrentChange"
                            :current-page="tableCurrent"                               
                            layout="prev, pager, next"
                            style="text-align: center"
                            :total="tableTotal">
                        </el-pagination>
                    </el-col>
               </el-row>
           </div>
        </div>

        <div v-show="filters.radio">
           <div class="tab-box" v-loading="tagLoading" element-loading-text="加载中...">
               <el-tabs key="2" v-model="tagActiveName">
                    <el-tab-pane label="需求" name="0">
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.requirement_total" :label_data="getFix(patchData.requirement_total)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.requirement" :label_data="getFix(patchData.requirement_based)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'需求变更率'"
                                    :num="getPrecent(patchData.req_change_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'需求基线率'"
                                    :num="getPrecent(patchData.req_baseline_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>                            
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'设计引入有效bug率'"
                                    :num="getPrecent(patchData.design_bug_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'OR需求覆盖度'"
                                    :num="getPrecent(patchData.req_or_case_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'SRS需求覆盖度'"
                                    :num="getPrecent(patchData.req_srs_case_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'AR需求覆盖度'"
                                    :num="getPrecent(patchData.req_ar_case_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'需求设计基线率'"
                                    :num="getPrecent(patchData.req_design_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>

                            <el-col :xs="24" :sm="24" :lg="6">
                                <info-label
                                    :type="'AVG'"
                                    :title="'需求引入有效bug率'"
                                    :num="getPrecent(patchData.req_bug_rate) + '%'"
                                    :sub="'%'"
                                    :to_sub="'百分比'"
                                    :cls="common.success"
                                ></info-label>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="任务" name="1">
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.task_total" :label_data="getFix(patchData.task_total)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.task_overdue" :label_data="getFix(patchData.task_overdue)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid 
                                :label_info="deptlableinfo.task_overdue_rate" 
                                :label_data="getPrecent(patchData.task_overdue_rate)"
                                :label_import="'small'"
                                :label_avg="standardKPI.task_overdue_avg_project"
                                    :label_now="patchData.task_overdue_rate"
                                    :label_good="kpi.task_overdue_avg_project"
                                    :label_precent="'precent'"
                                    :nessary="nessary">
                                </LabelGrid>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="Patch提交" name="2">
                        <el-row :gutter="30">
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid :label_info="deptlableinfo.number_count" :label_data="getFix(deptlable.number__count)"></LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid 
                                :label_info="deptlableinfo.avg_daily_patch_count" 
                                :label_data="getFix(deptlable.avg_daily_patch_count)"
                                :label_import="'big'"
                                :label_avg="standardKPI.code_avg_daily_patch_count_avg_project"
                                    :label_now="deptlable.avg_daily_patch_count"
                                    :label_good="kpi2.code_avg_daily_patch_count_avg_project"
                                    :label_precent="'num'"
                                    :nessary="nessary">
                                </LabelGrid>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="6">
                                <LabelGrid 
                                :label_info="deptlableinfo.avg_daily_effective_code" 
                                :label_data="getFix(deptlable.avg_daily_effective_code)"
                                :label_import="'big'"
                                :label_avg="standardKPI.code_avg_daily_effective_code_avg_project"
                                    :label_now="deptlable.avg_daily_effective_code"
                                    :label_good="kpi2.code_avg_daily_effective_code_avg_project"
                                    :label_precent="'num'"
                                    :nessary="nessary">
                                </LabelGrid>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>               
           </div>

           <div class="rank-box">
                <el-row :gutter="30">
                    <el-col :xs="24" :sm="24" :lg="12">
                        <el-card class="box-card m-b" shadow="never">
                            <div slot="header" class="clearfix" style="vertical-align:middle">
                                <div style="float: left; padding: 10px 0">Patch提交总数</div>
                                <el-radio-group v-model="patchSelected" style="float: right; padding: 3px 0" size="mini">
                                    <el-radio-button label="按个人"></el-radio-button>
                                    <el-radio-button label="按项目"></el-radio-button>
                                </el-radio-group>                       
                            </div>
                            <div v-if="patchSelected === '按个人'">
                                <el-table v-loading="personalLoad" :data="patchList.slice((current-1)*size,current*size)"
                                    style="width: 100%">
                                    <el-table-column width="100" align="center" label="排名">                 
                                        <template slot-scope="scope">
                                            <el-tag v-if="scope.$index=== 0 && current === 1" type="danger" size="medium" >
                                            TOP{{ scope.$index + 1 }}
                                            </el-tag>
                                            <el-tag v-else-if="scope.$index=== 1 && current === 1" type="warning" size="medium" >
                                            TOP{{ scope.$index + 1 }}
                                            </el-tag>
                                            <el-tag v-else-if="scope.$index=== 2 && current === 1" type="primary" size="medium" >
                                            TOP{{ scope.$index + 1 }}
                                            </el-tag>
                                            <span v-else> {{scope.$index + 1 + size*(current - 1)}} </span>
                                        </template>                                                               
                                        </el-table-column> 
                                        <el-table-column
                                        prop="owner"
                                        align="center"
                                        label="个人">
                                        </el-table-column>                              
                                        <el-table-column
                                        prop="count_patch"
                                        align="center"
                                        label="Patch提交总数">
                                        </el-table-column>
                                </el-table>
                                <el-pagination class="marT"
                                    :page-size="size"
                                    background                              
                                    @size-change="handleSizeChange3"
                                    @current-change="handleCurrentImportDeptChange3"
                                    :current-page="current"                               
                                    layout="prev, pager, next"
                                    style="text-align: center"
                                    :total="total">
                                </el-pagination>
                            </div>
                            <div v-else>
                                <el-table :data="sortpatchListProject"
                                    style="width: 100%">
                                    <el-table-column width="100" align="center" label="排名">                 
                                        <template slot-scope="scope">
                                            <el-tag v-if="scope.$index=== 0 && patchListCurrent === 1" type="danger" size="medium" >
                                            TOP{{ scope.$index + 1 }}
                                            </el-tag>
                                            <el-tag v-else-if="scope.$index=== 1 && patchListCurrent === 1" type="warning" size="medium" >
                                            TOP{{ scope.$index + 1 }}
                                            </el-tag>
                                            <el-tag v-else-if="scope.$index=== 2 && patchListCurrent === 1" type="primary" size="medium" >
                                            TOP{{ scope.$index + 1 }}
                                            </el-tag>
                                            <span v-else> {{scope.$index + 1 + patchListSize*(patchListCurrent - 1)}} </span>
                                        </template>                                                               
                                        </el-table-column> 
                                        <el-table-column
                                        prop="project_name"
                                        align="center"
                                        label="项目">
                                        </el-table-column>                              
                                        <el-table-column
                                        prop="count_patch"
                                        align="center"
                                        label="Patch提交总数">
                                        </el-table-column>
                                </el-table>
                                <el-pagination class="marT"
                                    :page-size="patchListSize"
                                    background                              
                                    @size-change="projectChange"
                                    @current-change="projectCurrentChange"
                                    :current-page="patchListCurrent"                               
                                    layout="prev, pager, next"
                                    style="text-align: center"
                                    :total="patchListProjectTotal">
                                </el-pagination>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="12">
                        <el-card class="box-card m-b" shadow="never">
                            <div slot="header" class="clearfix" style="vertical-align:middle">
                                <div style="float: left; padding: 10px 0">开发效率统计</div>
                                <el-radio-group v-model="importedSelected2" style="float: right; padding: 3px 0" size="mini">
                                    <el-radio-button label="平均日Patch提交数"></el-radio-button>
                                    <el-radio-button label="平均日有效代码提交"></el-radio-button>
                                </el-radio-group>
                            </div>
                            <div v-if="importedSelected2 === '平均日Patch提交数'">
                                <el-table
                                v-loading="personalLoad"
                                :data="patchRank.slice((effectCodeCurrent-1)*effectCodeSize,effectCodeCurrent*effectCodeSize)"
                                style="width: 100%"
                                >
                                    <el-table-column width="100" align="center" label="排名">                 
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index=== 0 && effectCodeCurrent === 1" type="danger" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 1 && effectCodeCurrent === 1" type="warning" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 2 && effectCodeCurrent === 1" type="primary" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else> {{scope.$index + 1 + effectCodeSize*(effectCodeCurrent - 1)}} </span>
                                    </template>                                                               
                                    </el-table-column>                               
                                    <el-table-column
                                    prop="owner"
                                    align="center"
                                    label="个人">
                                    </el-table-column>
                                    <el-table-column
                                    prop="avg_daily_patch_count"
                                    label="平均日Patch提交数(件/人)"
                                    align="center"
                                    >
                                    </el-table-column>                                                                
                                    <!-- <el-table-column
                                    prop="avg_daily_effective_code"
                                    label="平均日有效代码(行/人)"
                                    align="center"
                                    >
                                    </el-table-column>                               -->
                                </el-table>
                                <el-pagination class="marT"
                                    :page-size="effectCodeSize"
                                    background                              
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentImportDeptChange"
                                    :current-page="effectCodeCurrent"                               
                                    layout="prev, pager, next"
                                    style="text-align: center"
                                    :total="effectCodeTotal">
                                </el-pagination>
                            </div>
                            <div v-else>
                                <el-table
                                :data="effectCodeRank.slice((effectCodeCurrent2-1)*effectCodeSize2,effectCodeCurrent2*effectCodeSize2)"
                                style="width: 100%"
                                >
                                    <el-table-column width="100" align="center" label="排名">                 
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index=== 0 && effectCodeCurrent2 === 1" type="danger" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 1 && effectCodeCurrent2 === 1" type="warning" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 2 && effectCodeCurrent2 === 1" type="primary" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else> {{scope.$index + 1 + effectCodeSize*(effectCodeCurrent2 - 1)}} </span>
                                    </template>                                                               
                                    </el-table-column>                               
                                    <el-table-column
                                    prop="project_name"
                                    align="center"
                                    label="项目">
                                    </el-table-column>
                                    <!-- <el-table-column
                                    prop="avg_daily_patch_count"
                                    label="平均日patch提交数(件/人)"
                                    align="center"
                                    >
                                    </el-table-column>                                                                 -->
                                    <el-table-column
                                    prop="avg_daily_effective_code"
                                    label="平均日有效代码(行/人)"
                                    align="center"
                                    >
                                    </el-table-column>                              
                                </el-table>
                                <el-pagination class="marT"
                                    :page-size="effectCodeSize2"
                                    background                              
                                    @size-change="handleSizeChange2"
                                    @current-change="handleCurrentImportDeptChange2"
                                    :current-page="effectCodeCurrent2"                               
                                    layout="prev, pager, next"
                                    style="text-align: center"
                                    :total="effectCodeTotal2">
                                </el-pagination>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
           </div>

           <div class="line-box marT">
               <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                    <el-tab-pane name="0" label="Patch累计提交">
                        <ve-line 
                        :data="lineData"
                        :settings="lineChartSettings" 
                        ref="vline0"
                        :loading="lineLoad"
                        :data-empty="dataEmpty"></ve-line>
                    </el-tab-pane>
                    <el-tab-pane label="日Patch提交" name="1">
                        <ve-line 
                        :data="lineData2"
                        :settings="lineChartSettings" 
                        ref="vline1"
                        :data-empty="dataEmpty"></ve-line>
                    </el-tab-pane>
                    <el-tab-pane label="日有效代码提交" name="2">
                        <ve-line 
                        :data="lineData3"
                        :settings="lineChartSettings" 
                        ref="vline2"
                        :data-empty="dataEmpty"></ve-line>
                    </el-tab-pane>                   
                </el-tabs>
           </div>

           <div class="table-box marT bgColor">
               <div class="ibox-title pad">项目列表</div>
               <el-row style="padding: 20px">
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-table
                            :header-cell-style="{background:'#eef1f6'}"
                            v-loading="loading"
                            :data="tableData"                            
                            style="width: 100%">
                            <el-table-column
                                align="center"
                                type="index"                               
                                label="编号"
                                width="60">
                                <template slot-scope="scope">
                                    <span>{{ scope.$index + 1 + tableSize*(tableCurrent - 1) }}</span> 
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="project_name"
                                label="项目名称"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="requirement_total"
                                label="需求总数"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="requirement_based"
                                label="已基线数"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="task_total"
                                label="任务总件数"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="task_overdue"
                                label="任务延期件数"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="task_overdue_rate"
                                label="任务延期率"
                                >
                                <template slot-scope="scope">
                                    <span>{{ getPrecent(scope.row.task_overdue_rate) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination class="marT"
                            :page-size="tableSize"
                            background                              
                            @size-change="tableSizeChange"
                            @current-change="tableCurrentChange"
                            :current-page="tableCurrent"                               
                            layout="prev, pager, next"
                            style="text-align: center"
                            :total="tableTotal">
                        </el-pagination>
                    </el-col>
               </el-row>
           </div>
        </div>
    </div>
</template>
<script>
import LabelGrid from '@/components/qa/Label.vue'
import InfoLabel from '@/components/devops/info_label'
import common from '@/components/devops/get_data'
import DatePickerSummary from '@/views/summary/DatePickerSummary.vue'
import { getKpi2 } from '@/api/kpi'
import { getHeader } from '@/app.config';
import { mapState } from 'vuex'
export default {
    name: 'RequireImplement',
    components: {       
        datepickersummary: DatePickerSummary,
        LabelGrid,
        InfoLabel
    },
    computed: {
        ...mapState({
            filters: state => state.filters,
            allDepartmentList: state => state.allDepartmentList,            
            standardKPI: state => state.standardKPI
        }),
        sortpatchListProject(){
            if(this.patchListProject.length) {
                return this.sortByKey(this.patchListProject,'count_patch').slice((this.patchListCurrent-1)*this.patchListSize,this.patchListCurrent*this.patchListSize)
            } else {
                return []
            }
        },       
        sortpatchList() {
            let array = this.patchList 
            if(array.length) {
                return this.sortByKey(array,'count_patch').slice((this.current-1)*this.size,this.current*this.size)
            } else {
                return []
            }      
        },
        sortpatchRank() {
            if(this.patchRank.length) {
                return this.sortByKey(this.patchRank,'avg_daily_patch_count').slice((this.effectCodeCurrent-1)*this.effectCodeSize,this.effectCodeCurrent*this.effectCodeSize)
            } else {
                return []
            }
        },
        sorteffectCodeRank() {
            if(this.effectCodeRank.length) {
                return this.sortByKey(this.effectCodeRank,'avg_daily_effective_code').slice((this.effectCodeCurrent2-1)*this.effectCodeSize2,this.effectCodeCurrent2*this.effectCodeSize2)
            } else {
                return []
            }
        },
        getDate() {
            let time
            if(this.filters.time) {
                time = []
                let value = this.filters.time.split(',')
                value.forEach(val => {
                    val.split('-').forEach((num, index) => {
                        if(index == 0) {
                            time.push(`${val.split('-')[0]}-${val.split('-')[1]}`)
                        }
                    })
                })
                return time.join(',')
            } else {
                return time = ''
            }           
        }
    },
    data () {
        return {
            common,
            kpi: {},
            kpi2: {},
            nessary: false,
            loading: true,
            personalLoad: true,
            lineLoad: true,
            patchSelected: '按个人',
            deptlableinfo: {
                requirement_total: {
                    label_hname: '需求总数',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                requirement: {
                    label_hname: '已基线数',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                task_total: {
                    label_hname: '任务总件数',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },                
                task_overdue: {
                    label_hname: '任务延期件数',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                task_overdue_rate: {
                    label_hname: '任务延期率',
                    label_sname: '百分比',
                    label_unit: '(%)',
                    label_header: 'Avg',
                    label_class: 'danger',
                },               
                number_count: {
                    label_hname: 'Patch累计提交',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success'
                },
                avg_daily_patch_count: {
                    label_hname: '日Patch提交',
                    label_sname: '平均',
                    label_header: 'Avg',
                    label_unit: '(个)',
                    label_class: 'success'
                },
                avg_daily_effective_code: {
                    label_hname: '日有效代码提交行数',
                    label_sname: '平均',
                    label_header: 'Avg',
                    label_unit: '(行)',
                    label_class: 'success'
                }
            },
            activeName: 0,
            projTagActiveName: 0,
            tagActiveName: 0,
            deptlable: {},
            tagLoading: false,
            patchData: {},
            patchListProject: [],
            patchListProjectTotal: 0,
            patchListCurrent: 1,
            patchListSize: 10,
            importedSelected: '平均日代码提交数',
            importedSelected2: '平均日Patch提交数',
            effectCodeRank: [],
            patchRank: [],
            patchList: [],
            total: 0,
            current: 1,
            size: 10,
            effectCodeTotal: 0,
            effectCodeCurrent: 1,
            effectCodeSize: 10,
            effectCodeTotal2: 0,
            effectCodeCurrent2: 1,
            effectCodeSize2: 10,
            dataEmpty: true,
            tableData: [],
            tableSize: 10,
            tableCurrent: 1,
            tableTotal: 0,
            lineData: {
                columns: ['update_time', 'count_patch'],
                rows: []
            },
            lineData2: {
                columns: ['update_time', 'avg_daily_patch_count'],
                rows: []
            },
            lineData3: {
                columns: ['update_time', 'avg_daily_effective_code'],
                rows: []
            },
            lineChartSettings: {
				labelMap: {
                    count_patch: 'Patch累计提交',
                    avg_daily_patch_count: '日Patch提交（件/人）',
                    avg_daily_effective_code: '平均日有效代码提交（行/人）'					
				}
            }
        }
    },
    watch: {
        // filters: {
        //     handler: function() {
        //         this.getData()
        //     },
        //     deep: true,
        // },
        activeName(v) {
            this.$nextTick(() => {
				this.$refs[`vline${v}`].echarts.resize()
			})
        }
    },
    methods: {
        getLabelKpi(type) {
            getKpi2(type).then(res => {
                if (res.status == 200) {
                    if (res.data.code === 200) {
                        this.nessary = true
                        this.kpi = res.data.avg_kpi
                    }
				}
            })
        },
        getLabelKpi2(type) {
            getKpi2(type).then(res => {
                if (res.status == 200) {
                    if (res.data.code === 200) {
                        this.nessary = true
                        this.kpi2 = res.data.avg_kpi
                    }
				}
            })
        },
        getData: function() {
            console.log('111',this.filters.radio)
            if(!this.filters.radio) {
                this.getProjTag()
                this.getProjRank()
                this.getProjLine()
                this.getProjTable()
            } else {
                this.getLabelKpi('Requirement')
                this.getLabelKpi2('CodeReview')
                this.getDeptTag()
                this.getRank()
                this.getLine()
                this.getTable()
            }
        },
        projectChange(val) {
            this.patchListSize = val
        },
        projectCurrentChange(val) {
            this.patchListCurrent = val
        },
        handleSizeChange(val) {
            this.effectCodeSize = val
        },
        handleCurrentImportDeptChange(val) {
            this.effectCodeCurrent = val
        },
        handleSizeChange2(val) {
            this.effectCodeSize2 = val
        },
        handleCurrentImportDeptChange2(val) {
            this.effectCodeCurrent2 = val
        },
        handleSizeChange3(val) {
            this.size = val
        },
        handleCurrentImportDeptChange3(val) {
            this.current = val
        },
        tableSizeChange(val) {
            this.tableSize = val
        },
        tableCurrentChange(val) {
            this.tableCurrent = val
            if(!this.filters.radio) {
                this.getProjTable()
            } else {
                this.getTable()
            }
        },
        handleClick() {
            
        },
        sortByKey(array,key){
            return array.slice().sort(function(a,b){
                var x = a[key];
                var y = b[key];
                return((x>y)?-1:((x<y)?1:0));
            })
        },
        getFix: function(data) {
            if (null == data || "undefined" == typeof(data) || "" == data) {
                return 0;
            } else {
                return data
            }
        },
        getNum(num) {
            let number
            if(num) {
                number = Number(num).toFixed(2)
            } else {
                number = 0
            }            
            return number
        },
        getPrecent(num) {
            let number
            if(num) {
                number = Number(num*100).toFixed(2)
            } else {
                number = 0
            }            
            return number
        },
        getProjTag() {
            this.deptlable = {}
            this.tagLoading = true
            this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/summary/proj-summary-summary?date=${this.filters.time}&projectId=${this.filters.projectId}`, {headers: getHeader()}) //${this.filters.projectId}
            .then(res => {
                if(res.status == 200) {
                    if(res.data.code == 200) {
                        this.tagLoading = false
                        this.deptlable = res.data.data
                    } else {
                        this.tagLoading = false
                    }
                }
            })

            this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/projcodesummary?time=${this.filters.time}&projectId=${this.filters.projectId}`, {headers: getHeader()}) //${this.filters.projectId}
            .then(res => {
                if(res.status == 200) {
                    if(res.data.code == 200) {
                        this.patchData = res.data.data
                    }
                }
            })            
        },
        getProjRank() {
            this.patchList = []
            this.effectCodeRank = []
            this.patchRank = []
            this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/proj-personal-rank-by-code-kpi?time=${this.filters.time}&projectId=${this.filters.projectId}`, {headers: getHeader()}) // ${this.filters.projectId}
            .then(res => {
                  if(res.status == 200) {
                    if(res.data.code == 200) {
                        this.patchList = res.data.rank_list
                        this.total = res.data.rank_list.length
                       
                        this.effectCodeRank = res.data.rank_list         
                        this.effectCodeTotal2 = res.data.rank_list.length
                        this.patchRank = res.data.rank_list
                        this.effectCodeTotal = res.data.rank_list.length
                    }
                  }            
            })            
        },
        getProjLine() {
            this.lineData.rows = []
            this.lineData2.rows = []
            this.lineData3.rows = []
            this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/projcodedaily?time=${this.filters.time}&projectId=${this.filters.projectId}&mode=chart`, {headers: getHeader()})
            .then(res => {
                if(res.status == 200) {
                    if(res.data.code == 200) {
                        this.lineData.rows = res.data.qSet
                        this.lineData2.rows = res.data.qSet
                        this.lineData3.rows = res.data.qSet
                        res.data.qSet.length !=0 ? this.dataEmpty = false : this.dataEmpty = true
                    }
                }             
            })
        },
        getProjTable() {
            this.tableData = []
            this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/summary/proj-summary-daily?date=${this.getDate}&projectId=${this.filters.projectId}&page=${this.tableCurrent}`, {headers: getHeader()})
            .then(res => {
                if(res.status == 200) {
                    if(res.data.code == 200) {
                        this.tableData = res.data.daily_list
                        this.tableTotal = res.data.count
                    }
                }
            })
        },
        getDeptTag() {
            let data = {}
            this.deptlable = {}
            this.tagLoading = true
            if(this.filters.departList.length) {           
                data = {departmentIds: this.filters.departmentId}
            } else {             
                data = {departmentIds: this.allDepartmentList.allDepartmentList}              
            }
            
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-code-summary?time=${this.filters.time}`, data, {headers: getHeader()})
                .then(res => {
                    if(res.status == 200) {
                        if(res.data.code == 200) {
                            this.tagLoading = false
                            this.deptlable = res.data.summary
                        } else {
                            this.tagLoading = false
                        }
                    }
                }) 
            
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/summary/dept-summary-summary?date=${this.filters.time}`, data, {headers: getHeader()})
                .then(res => {
                    if(res.status == 200) {
                        if(res.data.code == 200) {
                            this.patchData = res.data.summary
                        }
                    }
                }) 
        },
        getRank() {
            this.patchList = []
            this.effectCodeRank = []
            this.patchRank = []
            this.personalLoad = true
            let data = {}
            if(this.filters.departList.length) {           
                data = {departmentIds: this.filters.departmentId}
            } else {             
                data = {departmentIds: this.allDepartmentList.allDepartmentList}              
            }           
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-personal-rank-by-avg-daily-code-kpi?time=${this.filters.time}&order_by=count_patch`, data, {headers: getHeader()})
                .then(res => {
                    if(res.status == 200) {
                        if(res.data.code == 200) {                            
                            this.patchList = res.data.rank_list
                            this.total = res.data.rank_list.length
                        }
                    }
                })

            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-projrank-by-avg-daily-code-kpi?time=${this.filters.time}&order_by=avg_daily_effective_code`, data, {headers: getHeader()})
                .then(res => {
                    if(res.status == 200) {
                        if(res.data.code == 200) { 
                            this.personalLoad = false                          
                            this.patchListProject = res.data.rank_list
                            this.patchListProjectTotal = res.data.rank_list.length
                            this.effectCodeRank = res.data.rank_list
                            this.effectCodeTotal2 = res.data.rank_list.length
                        }
                    }                  
                })

            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-personal-rank-by-avg-daily-code-kpi?time=${this.filters.time}`, data, {headers: getHeader()})
                .then(res => {
                    if(res.status == 200) {
                        if(res.data.code == 200) {
                            this.patchRank = res.data.rank_list
                            this.effectCodeTotal = res.data.rank_list.length
                        }
                    }                  
                })    
        },
        getLine() {
            this.lineData.rows = []
            this.lineData2.rows = []
            this.lineData3.rows = []
            let data = {}
            if(this.filters.departList.length) {           
                data = {departmentIds: this.filters.departmentId}
            } else {             
                data = {departmentIds: this.allDepartmentList.allDepartmentList}              
            }                     
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-code-daily?time=${this.filters.time}&mode=chart`, data, {headers: getHeader()})
                .then(res => {
                    if(res.status == 200) {
                        if(res.data.code == 200) {
                            this.lineLoad = false
                            this.lineData.rows = res.data.daily_list
                            this.lineData2.rows = res.data.daily_list
                            this.lineData3.rows = res.data.daily_list
                            res.data.daily_list.length !=0 ? this.dataEmpty = false : this.dataEmpty = true
                        }
                    }
                })
        },
        getTable() {
            this.tableData = []
            this.loading = true
            let data = {}
            if(this.filters.departList.length) {           
                data = {departmentIds: this.filters.departmentId}
            } else {             
                data = {departmentIds: this.allDepartmentList.allDepartmentList}              
            }
            
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/summary/dept-proj-summary-kpi?date=${this.filters.time}&page=${this.tableCurrent}`, data, {headers: getHeader()})
                .then(res => {
                    if(res.status == 200) {
                        if(res.data.code == 200) {
                            this.loading = false
                            this.tableData = res.data.kpi_list
                            this.tableTotal = res.data.count
                        }
                    }
                })
        }     
    },
    mounted() {
        // this.getData()
    },
}
</script>
d
<style lang="scss" scoped>
    @import '../../assets/common/common.scss';

    #RequireImplement{
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;
    }
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .primary{
        color: #409EFF;
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    .marT{
        margin-top: 20px;
    }
    .bgColor{
        background: #fff;
    }
    .pad{
        padding: 18px 20px;
        border-bottom: 1px solid #e6ebf5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;       
    }
</style>
